<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="../style/css.css" />
    <script type="text/javascript">
        window.onload = function() {
//创建一个"广州"节点,添加到#city下
            myClick("btn01",function () {
                var li=document.createElement("li");
                var gz=document.createTextNode("广州");
                li.appendChild(gz);
                city=document.getElementById("city");
                city.appendChild(li);
            });
//将"广州"节点插入到#bj前面
            myClick("btn02",function () {
                var li =document.createElement("li");
                var gz=document.createTextNode("广州")
                li.appendChild(gz);
                var bj=document.getElementById("bj");
                var city=document.getElementById("city");
                city.insertBefore(li,bj);
            });
//使用"广州"节点替换#bj节点
            myClick("btn03",function () {
                var li =document.createElement("li");
                var gz=document.createTextNode("广州")
                li.appendChild(gz);
                var bj=document.getElementById("bj");
                var city=document.getElementById("city");
                city.replaceChild(li,bj);
            });
//删除#bj节点
            myClick("btn04",function () {
                var bj=document.getElementById("bj");
                bj.parentNode.removeChild(bj);
            });
//读取#city内的HTML代码
            myClick("btn05",function () {
                var city=document.getElementById("city");
                alert(city.innerHTML);
            });
//设置#bj内的HTML代码
            myClick("btn06",function () {
                var bj=document.getElementById("bj");
                bj.innerHTML="昌平";
            });
//创建一个"广州"节点,添加到#city下
             myClick("btn07",function () {
                var li=document.createElement("li");
                li.innerHTML="广州";
                var city=document.getElementById("city");
                city.appendChild(li);

            });
        };
        function myClick(bstr,fun) {
                var btn=document.getElementById(bstr);
                btn.onclick=fun;
        }
    </script>

</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

    </div>
</div>
<div id="btnList">
    <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
    <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
    <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
    <div><button id="btn04">删除#bj节点</button></div>
    <div><button id="btn05">读取#city内的HTML代码</button></div>
    <div><button id="btn06">设置#bj内的HTML代码</button></div>
    <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>
